import React, { Component } from 'react';
import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';

export default class DateTimePickerTester extends Component {
    static defaultProps = {
        selectorTemplate: undefined, //JSX
        date: new Date(),//传入的时间，默认是当前时间
        onConfirm: () => {},
        onCancel: () => {},
        style: {},
        visible: false
    }

    state = {
        isDateTimePickerVisible: false,
    };

    _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

    _hideDateTimePicker = () => {
        const {onCancel} = this.props
        this.setState({ isDateTimePickerVisible: false })
    };

    _handleDatePicked = date => {
        const {onConfirm} = this.props
        onConfirm(date)
        this._hideDateTimePicker();
    };

    render() {
        const {selectorTemplate, date, style, visible} = this.props
        return (
        <View style={styles.container}>
            <TouchableOpacity onPress={this._showDateTimePicker} style={style}>
                {
                    selectorTemplate == undefined ? (
                        <View style={styles.button}>
                            <Text>Show DatePicker</Text>
                        </View>
                    ) : selectorTemplate
                }
                
            </TouchableOpacity>
            <DateTimePicker
                isVisible={visible}
                onConfirm={this._handleDatePicked}
                onCancel={this._hideDateTimePicker}
                reactNativeModalPropsIOS={
                    {
                        supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']
                    }
                }
                date={new Date(date)}
            />
        </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    
    button: {
      backgroundColor: 'lightblue',
      padding: 12,
      margin: 16,
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 4,
      borderColor: 'rgba(0, 0, 0, 0.1)',
    },
  });